<template>
  <z-paging
    ref="pagingRef"
    :default-page-size="pageSize"
    :auto="immediate"
    v-model="dataList"
    @query="queryList"
    :hide-no-more-by-limit="10"
    v-bind="{ ...getProps, ...$attrs }"
  >
    <template #top>
      <slot name="top"> </slot>
    </template>
    <slot :dataSource="dataList"></slot>
    <template #empty>
       <slot name="empty"> 
      <view class="w-100 h-100">
        <slot name="empty" v-if="hasSearchNum">
          <view class="px-32 w-100 h-100 py-24">
            <zdy-empty
              style="width: 100%; height: 100%"
              :wrap-style="emptyStyle"
              :empty-type="emptyType"
              :tip-title="emptyTitle"
            ></zdy-empty>
          </view>
        </slot>

        <view class="px-32 py-24 w-100 h-100" v-else>
          <zdy-empty
            style="width: 100%; height: 100%"
            :wrap-style="emptyStyle"
            empty-type="nothing"
            :tip-title="emptyTitle ? emptyTitle : `暂无${pageTitle}`"
          ></zdy-empty>
        </view>
      </view>
      </slot>
    </template>
    <template #bottom>
      <slot name="bottom"> </slot>
    </template>
  </z-paging>
</template>
<script setup>
import zPaging from "z-paging/components/z-paging/z-paging.vue";
import { isEmpty } from "@/utils/common/index";
const props = defineProps({
  emptyType: {
    type: String,
    default: "nothing",
  },
  emptyTitle: {
    type: String,
    default: "",
  },
  pageTitle: {
    type: String,
    default: "相关数据",
  },
  apiFetch: {
    type: Function,
    default: null,
  },
  // 排除字段
  excludeFields: {
    type: Array,
    default: [],
  },
  // 额外分页参数
  pageParams: {
    type: Object,
    default: () => {
      return {};
    },
  },
  // 额外查询条件
  queryParams: {
    type: Object,
    default: () => {
      return {};
    },
  },
  beforeFetch: {
    // 请求之前对数据操作
    type: Function,
    default: null,
  },
  afterFetch: {
    type: Function,
    default: null,
  },
  // 自动refresTable
  immediate: {
    default: true,
    type: Boolean,
  },
  pageSize: {
    type: [Number, String],
    default: 20,
  },
  pagination: {
    type: [Object, Boolean],
    default: true,
  },
  showRefresh: {
    //onShow的时候是否刷新
    type: Boolean,
    default: true,
  },
  listKey: {
    type: String,
    default: "list",
  },
  needPage: {
    // 是否需要分页
    type: Boolean,
    default: true,
  },
  transFormData: {
    // 转换数据格式
    type: Function,
    default: null,
  },
});

const emptyStyle = ref({
  margin: "0",
  padding: 0,
  height: "100%",
  "justify-content": "flex-start",
  "padding-top": "240rpx",
});

const emit = defineEmits([
  "fetch-error",
  "fetch-success",
  "change",
  "register",
]);
const innerPropsRef = ref({});
const getProps = computed(() => {
  return { ...props, ...unref(innerPropsRef) };
});
const pagingRef = ref();
const dataList = ref([]);
// 首次加载列表显示loding
const firstLoad = ref(true);
const pageLoading = ref(false);
let currentSize = ref(1);
const pageTotal = ref(0);
const allList = ref([]);
const queryList = (current, size) => {
  try {
    if (!pageLoading.value) {
      let params = {};
      if (props.needPage) {
        params = {
            current: current,
            size: size,
            ...props.pageParams,
        };
      }
      params = {
        ...params,
        ...props.queryParams,
      };

      currentSize.value = current;
      pageLoading.value = true;
      props
        .apiFetch(params, { isShowLoading: firstLoad.value })
        .then((res) => {
          console.log("res11111", res);
          if (firstLoad.value) {
            firstLoad.value = false;
          }
          let data = [];
          console.log("props.listKey", props.listKey);
          data = res[props.listKey] || res;
          // pageTotal.value = Number(res.total) || 0;
          console.log("data1", data);
          if (props.transFormData) {
            data = props.transFormData(data);
          }
          pagingRef.value.complete(data);
          if (!props.needPage) {
            allList.value = data;
          }
        })
        .catch((res) => {
          console.log("res", res);
          pagingRef.value.complete(false);
        })
        .finally(() => {
          pageLoading.value = false;
        });
    }
  } catch (err) {
    console.log("err", err);
  }
};

//重新加载数据，就是下拉刷新
function reloadList(opt) {
  try {
    nextTick(() => {
      pagingRef.value.reload(opt);
    });
  } catch (err) {
    console.log("err", err);
  }
}

// 刷新所有数据,给所有当前列表的所有数据刷新数据
function refreshList() {
  if (pagingRef.value) {
    pagingRef.value.refresh();
  }
}

function setProps(props) {
  innerPropsRef.value = { ...unref(innerPropsRef), ...props };
}

const hasSearchNum = computed(() => {
  try {
    const isSearchNum = Object.keys(props.queryParams).every((key) => {
      if (props.excludeFields?.includes(key)) {
        return true;
      } else {
        return isEmpty(props.queryParams[key]);
      }
    });
    console.log("isSearchNum", isSearchNum);
    return isSearchNum;
  } catch (error) {
    console.log("error", error);
  }
});

const tableAction = {
  refreshList,
  reloadList,
  setProps,
  pagingRef,
  getProps,
  dataList,
};

emit("register", tableAction);
defineExpose(tableAction);
</script>
<style scoped lang="scss"></style>
